<template>
  <el-row class="message-container">
    <el-col :span="24">
      <div class="tab-header">
        <div :class="tabActiveIndex == 1 ? 'tab-title tab-active': 'tab-title'" title="成员管理" data-index="1" @click="tabClick(1)">
          <span>转评赞</span>
        </div>
        <div :class="tabActiveIndex == 2 ? 'tab-title tab-active': 'tab-title'" title="成员管理" data-index="2" @click="tabClick(2)">
          <span>活动报名<el-badge class="mark" :value="3" /></span>
        </div>
        <div :class="tabActiveIndex == 3 ? 'tab-title tab-active': 'tab-title'" title="成员管理" data-index="3" @click="tabClick(3)">
          <span>申请权限<el-badge class="mark" :value="2" /></span>
        </div>
      </div>
    </el-col>
    <mescroll-vue class="message-content" @init="mescrollInit" :up="mescrollUp" :down="mescrollDown" ref="mescroll">
      <div :class="tabActiveIndex == 1 ? 'message-comment message message-active': 'message-comment message'">
        <el-row :span="24" class="activity-btn">
          <el-button type="primary" @click="commentAllClick">全部忽略</el-button>
        </el-row>
        <el-row>
          <ul class="message-list">
            <li class="message-item">
              <p class="message-title">xxxxxxxxxxxx申请加入？</p>
              <div style="float: right;">
                <el-button type="text" class="blueTx">设为精选评论</el-button>
                <el-button type="text" class="blueTx">回复</el-button>
                <el-button type="text" class="redTx">拉黑</el-button>
                <el-button type="text" class="blueTx">忽略</el-button>
              </div>
            </li>
            <li class="message-item">
              <p class="message-title">xxxxxxxxxxxx申请加入？</p>
              <div style="float: right;">
                已同意
              </div>
            </li>
            <li class="message-item">
              <p class="message-title">xxxxxxxxxxxx申请加入？</p>
              <div style="float: right;">
                已拒绝
              </div>
            </li>
          </ul>
        </el-row>
      </div>
      <div :class="tabActiveIndex == 2 ? 'message-activity message message-active': 'message-activity message'">
        <ul class="message-list">
          <li class="message-item" v-for="item,key in activityList">
            <p class="message-title">{{ item.arContent }}<span style="margin-left: 15px;">{{ item.arGmtCreate | formatTime }}</span></p>
          </li>
        </ul>
      </div>
      <div :class="tabActiveIndex == 3 ? 'message-authority message message-active': 'message-authority message'">
        <ul class="message-list">
          <li class="message-item" v-for="item,key in authorityList">
            <p class="message-title">{{ item.apContent }}</p>
            <div style="float: right;" v-if="item.apState == 0">
              <el-button type="text" class="resolve blueTx" @click="authorityAuditClick(item.applyPermissionId,1,key)">同意</el-button>
              <el-button type="text" class="refuse redTx" @click="authorityAuditClick(item.applyPermissionId,2,key)">拒绝</el-button>
            </div>
            <div style="float: right;" v-else-if="item.apState == 1">
              已同意
            </div>
            <div style="float: right;" v-else>
              已拒绝
            </div>
          </li>
        </ul>
      </div>
    </mescroll-vue>
  </el-row>
</template>

<script>
import { 
  getApplyPermissionList,
  setApplyPermission,
  getActivityList,
  getCommentList
} from '@/api/message'
import MescrollVue from 'mescroll.js/mescroll.vue'
import { formatTime } from '@/utils/index'

export default {
  name: 'Message',
  data() {
    return {
      tabActiveIndex: 1,
      mescroll: null, // mescroll实例对象
      mescrollDown: {
        use: false
      },
      mescrollUp: {
        page: {
          num: 0,
          size: 20
        },
        callback: this.getMessageList,
        auto: true,
        htmlNodata: '<p class="upwarp-nodata">-- 无更多数据 --</p>'
      },
      authorityList: [  // 申请权限列表

      ],
      commentList: [  // 转赞评消息列表

      ],
      activityList: [  // 活动消息列表

      ],
    }
  },
  components: {
    MescrollVue
  },
  filters: {
    formatTime
  },
  methods: {
    tabClick(index) {
      if(index != this.tabActiveIndex){
        this.tabActiveIndex = index
        this.activityList = []
        this.authorityList = []
        this.commentList = []
        this.$nextTick(() => {
          this.mescroll.resetUpScroll(null)
        })
      }
    },
    commentAllClick() {
      conosle.log("全部忽略")
    },
    getMessageList(page) {
      let tabIndex = this.tabActiveIndex;
      if(tabIndex == 1) {
        this.getComList(page)
      } else if(tabIndex == 2) {
        this.getActList(page)
      } else {
        this.getApplyList(page)
      }
    },
    mescrollInit (mescroll) {
      this.mescroll = mescroll  // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },
    // 获取申请权限列表
    getApplyList(page) {
      getApplyPermissionList({
        pageNo: page.num,
        pageSize: page.size
      }).then(response => {
        this.authorityList = this.authorityList.concat(response.data.datas)
        // 数据渲染成功后,隐藏下拉刷新的状态
        this.$nextTick(() => {
          this.mescroll.endSuccess(response.data.datas.length)
        })
      }).catch((e) => {
        // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
        this.mescroll.endErr()
      })
    },
    // 单个申请权限审批
    authorityAuditClick(applyPermissionId,state,key) {
      setApplyPermission({
        applyPermissionId: applyPermissionId,
        apState: state
      }).then(response => {
        this.$message.success("已审批")
        this.authorityList[key].apState = state
      })
    },
    // 获取活动报名信息列表
    getActList(page) {
      getActivityList({
        pageNo: page.num,
        pageSize: page.size
      }).then(response => {
        this.activityList = this.activityList.concat(response.data.datas)
        // 数据渲染成功后,隐藏下拉刷新的状态
        this.$nextTick(() => {
          this.mescroll.endSuccess(response.data.datas.length)
        })
      }).catch((e) => {
        // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
        this.mescroll.endErr()
      })
    },
    // 获取点赞评论列表
    getComList(page) {
      getCommentList({
        pageNo: page.num,
        pageSize: page.size
      }).then(response => {
        this.commentList = this.commentList.concat(response.data.datas)
        // 数据渲染成功后,隐藏下拉刷新的状态
        this.$nextTick(() => {
          this.mescroll.endSuccess(response.data.datas.length)
        })
      }).catch((e) => {
        // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
        this.mescroll.endErr()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
ul,li{
  margin: 0;
  padding: 0;
  list-style: none;
}
.redTx{
  color: #EB1B34;
}
.blueTx{
  color: #015DFF;
}
.message-container {
  padding: 18px 30px;
  .tab-header {
    background-color: #F0F2F5;
    height: 54px;
    .tab-title{
      display: inline-block;
      min-width: 74px;
      height: 54px;
      line-height: 54px;
      text-align: center;
      background-color: #F0F2F5;
      span{
        display: inline-block;
        height: 100%;
        margin: 0 25px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        box-sizing: border-box;
        color: rgba(0, 0, 0, 0.85);
        cursor: pointer;
      }
    }
    .tab-title.tab-active{
      background: #fff;
      border-radius: 10px 10px 2px 2px;
      span{
        color: #015DFF;
        border-bottom: 2px solid #015DFF;
      }
    }
  }
  .message-content{
    max-height: calc(100vh - 150px);
    height: 100%;
    padding: 30px;
    background-color: #fff;
    .message{
      display: none;
      .message-list{
        padding: 70px 92px 50px 88px;
        .message-item{
          padding: 0 10px;
          color: #aaa;
          font-size: 14px;
          border-bottom: 1px solid #eee;
          line-height: 54px;
          .message-title{
            display: inline-block;
            width: calc(100% - 190px);
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: top;
          }
        }
      }
    }
    .message-comment{
      .activity-btn{
        text-align: right;
        button{
          min-width: 100px;
          padding: 7px 14px;
          background-color: #015DFF;
          border-radius: 4px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          line-height: 24px;
          color: #fff;
        }
      }
      .message-list{
        padding-top:  30px;
        .message-item{
          .message-title{
            width: calc(100% - 230px);
          }
        }
      }
    }
    .message-activity{
      .message-list{
        .message-item{
          .message-title{
            width: 100%;
          }
        }
      }
    }
    .message-authority{
      button{
        margin: 0;
      }
      .resolve{
        margin-right: 62px;
      }
    }
    .message.message-active{
      display: block;
    }
  }
}
</style>